<template>
	<view class="container">
		<!-- 顶部课程主图 -->
		<image class="course-banner" :src="classDetail.info.thumb" mode="aspectFill"></image>

		<!-- 课程信息 -->
		<view class="course-info">
			<view class="title">{{ classDetail.info.c_name }}</view>
			<view class="brief">上课周期 {{ classDetail.info.week }} | 适合人群： {{ classDetail.info.person }}</view>
			<view class="brief">7*24小时技术支持</view>
			  
			<!-- 授课老师 -->
			<view class="teacher-section">
				<view class="teacher-info" v-for="item in classDetail.teacher">
					<image class="teacher-avatar" :src="item.thumb"></image>
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
	
			<!-- 课程大纲 -->
			<view class="section">
				<view class="section-title">课程大纲</view>
				<view class="section-content">
					<view class="section-list" v-for="(item,index) in classDetail.lists">
						<view class="accordion-header" @click="toggleAccordion(index)">
							<view class="class_name"> {{ item.p_name }} </view>
							<view :class="['arrow', activeIndex === index ? 'open' : '']"></view>
						</view>
						<view class="accordion-content" :style="{ maxHeight: activeIndex === index ? maxHeight + 'px' : '0' }">
							<view class="detail" v-for="(items,key) in item.two">
								<view class="infos">
									<view class="indexs"> {{ key+1 }}、 </view>
									<view class="names"> 
										<view class="keys"> {{ items.name }} </view>
										<view class="times"> 视频时长：{{ items.long }}分钟 </view>
									 </view>
								</view>
								<view class="plays" @click="playVideo(items)">
									<image src="/static/play.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseURL: getApp().globalData.baseUrl,
				classDetail: {},
				isOpen: false,
				maxHeight: 3000,
				activeIndex: -1
			}
		},
		computed: {
		    isOpen() {
				return this.index === this.activeIndex
		    }
		},
		onLoad(options) {
			const classId = options.id;
			this.detail(classId);
		},
		methods: {
			handlePreview() {
				uni.showToast({ title: '试听功能', icon: 'none' })
			},
			handleApply() {
				uni.showToast({ title: '立即报名', icon: 'none' })
			},
			detail(classId){
				var appid = uni.getStorageSync('appid')
				uni.request({
					url: this.baseURL + '/api/user/study',
					method: 'POST',
					data: {cid: classId,appid:appid},
					header: { 'Content-Type': 'application/json' },
					success: (res) => {
						this.classDetail = res.data.data
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			toggleAccordion(index) {
				this.activeIndex = this.activeIndex === index ? -1 : index;
			},
			playVideo(item){
				uni.navigateTo({url: '/pages/video/class?urls='+item.url+'&vid='+item.hash})
			},
		}
	}
</script>

<style>
	.container {background-color: #f8f8f8;height: 100vh;}
	.course-banner {width: 100%;height: 350rpx;display: block;}
	.course-info {padding: 30rpx;}
	.title {font-size: 36rpx;font-weight: bold;color: #333;margin-bottom: 10rpx;}
	.brief {font-size: 26rpx;color: #888;margin-bottom: 10rpx;}
	.price {color: #EB6E30;font-size: 40rpx;font-weight: bold;margin-bottom: 10rpx;}
	.teacher-section {display: flex;justify-content: start;margin-bottom: 10rpx;flex-direction: row;padding-top: 10rpx;}
	.teacher-info {display: flex;flex-direction: row;align-items: center;margin-left: 10rpx;}
	.teacher-info:first-child{margin-left: 0;}
	.name {font-size: 26rpx;color: #888;padding-left: 10rpx;}
	.teacher-avatar {width: 60rpx;height: 60rpx;border-radius: 60rpx;}
	.section {background-color: #fff;border-radius: 16rpx;padding: 30rpx;margin-bottom: 30rpx;}
	.section-title {font-size: 32rpx;font-weight: bold;color: #333;margin-bottom: 20rpx;padding-bottom: 20rpx;border-bottom: 1rpx solid #eee;}
	.section-content {font-size: 28rpx;color: #666;line-height: 1.6;}
	.right {width: 40rpx;height: 40rpx;}
	.right image{width: 40rpx;height: 40rpx;}
	.nodata{width: 100%;text-align: center;font-size: 30rpx;color: #888;}
	.section-list{display: flex;justify-content: space-between;flex-direction: column;}
	.accordion {border: 1px solid #eee;border-radius: 8px;margin: 10px;overflow: hidden;}
	.accordion-header {display: flex;justify-content: space-between;align-items: center;padding: 15px;transition: background-color 0.3s;flex-direction: row;}
	.accordion-header:active {background-color: #f0f0f0;}
	.arrow {width: 12px;height: 12px;border-left: 2px solid #666;border-bottom: 2px solid #666;transform: rotate(-45deg);transition: transform 0.3s;}
	.arrow.open {transform: rotate(135deg);}
	.accordion-content {overflow: hidden;transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);padding: 0 15px;background-color: #fff;border-top: 1px solid #eee;}
	.accordion-content > view {padding: 15px 0;}
	.detail{display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #efefef;}
	.plays{width: 40rpx;height: 40rpx;float: right;}
	.plays image{width: 40rpx;height: 40rpx;}
	.names{font-size: 24rpx;padding-left: 20rpx;}
	.indexs{width: 30rpx;}
	.times{color: #aaa;padding-top: 10rpx;}
	.infos{display: flex;flex-direction: row;}
</style>